<script setup>
import {ref, onMounted, computed, watch} from 'vue';

// --- ECharts 核心库和图表 ---
import * as echarts from 'echarts/core';
import {GridComponent, TooltipComponent, LegendComponent, RadarComponent} from 'echarts/components';
import {LineChart, RadarChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

// --- 图标库 ---
import {
  Smartphone, Headphones, Watch, Search, Package, Plane,
  Truck, Warehouse, CheckCircle2, Archive
} from 'lucide-vue-next';

// --- ECharts 注册组件 ---
echarts.use([
  GridComponent, TooltipComponent, LegendComponent, RadarComponent,
  LineChart, RadarChart, CanvasRenderer, UniversalTransition
]);


//======================================================================
// 1. 顶部统计卡片 (StatCard) 的数据和逻辑
//======================================================================
const statCardsData = [
  {title: '空气炸锅', value: '220', unit: '台', status: '需补货', percentage: 21},
  {title: '电饼铛', value: '700', unit: '台', status: '充足', percentage: 53},
  {title: '烧烤炉', value: '420', unit: '台', status: '充足', percentage: 78},
];

const getIconForCard = (title) => {
  if (title.includes('手机')) return Smartphone;
  if (title.includes('耳机')) return Headphones;
  if (title.includes('手表')) return Watch;
  return null;
};

const getColorClassesForCard = (color) => {
  switch (color) {
    case 'blue':
      return {bg: 'bg-[#6E7CFF]'};
    case 'red':
      return {bg: 'bg-[#00CF76]', badgeColor: 'red'};
    case 'orange':
      return {bg: 'bg-[#FF9800]'};
    default:
      return {};
  }
};


//======================================================================
// 2. 库存预警趋势图 (TrendChart) 的逻辑
//======================================================================
const trendChartContainer = ref(null);
const trendChartOptions = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}
    // 使用默认的提示信息格式
  },
  legend: {
    data: ['空气炸锅', '电饼铛', '烧烤炉'],
    bottom: 10,
    itemWidth: 10,
    itemHeight: 10,
    icon: 'circle'
  },
  grid: {
    left: '1%',
    right: '3%',
    bottom: '15%',
    top: '5%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号'],
    axisLine: {show: false},
    axisTick: {show: false}
  }],
  yAxis: [{
    type: 'value',
    min: 0,
    // 设置最大值以适应所有数据
    max: 1200,
    splitLine: {lineStyle: {type: 'dashed'}},
    axisLabel: {
      formatter: '{value}',
      margin: 10
    }
  }],
  series: [
    {
      name: '空气炸锅',
      type: 'line',
      // 移除 stack 属性，使其不堆叠
      areaStyle: {color: '#6E7CFF'},
      emphasis: {focus: 'series'},
      data: [800, 650, 500, 300, 1000, 850, 700, 500, 250, 1100, 900, 750, 600, 400, 220],
      showSymbol: true,
      smooth: true,
      markPoint: {
        data: [
          {
            name: '需要补货', value: 220, xAxis: 14, yAxis: 220,
            label: {formatter: '库存\n22%'},
            itemStyle: {color: '#FF0000'}
          }
        ]
      },
      markLine: {
        data: [
          {yAxis: 270, name: '补货阈值'}
        ]
      }
    },
    {
      name: '电饼铛',
      type: 'line',
      // 移除 stack 属性，使其不堆叠
      // areaStyle: {color: '#00CF76'},
      emphasis: {focus: 'series'},
      data: [1000, 900, 800, 700, 950, 850, 750, 650, 900, 800, 700, 600, 850, 750, 700],
      showSymbol: true,
      smooth: true
    },
    {
      name: '烧烤炉',
      type: 'line',
      // 移除 stack 属性，使其不堆叠
      // areaStyle: {color: '#FF9800'},
      emphasis: {focus: 'series'},
      data: [900, 750, 600, 450, 800, 650, 500, 350, 700, 550, 400, 800, 650, 500, 420],
      showSymbol: true,
      smooth: true
    }
  ],
  color: ['#6E7CFF', '#00CF76', '#FF9800']
};

//======================================================================
// 3. 物流追踪 (LogisticsTracker) 的数据
//======================================================================
const trackingData = [
  {
    icon: Package,
    text: '包裹已抵达曼谷机场仓，等待进入海关\nThe package has arrived at the warehouse at Bangkok Airport and is waiting to be processed by customs.',
    time: '2023-12-15 14:30:24',
    active: true
  },
  {
    icon: Plane,
    text: '离开**机场仓，运输中\nDeparting from Hangzhou Airport Cargo Terminal, in transit',
    time: '2023-12-15 08:15:47',
    active: false
  },
  {
    icon: Warehouse,
    text: '****分公司已收件\nThe Hangzhou branch of Zhejiang Company has received the documents',
    time: '2023-12-14 16:22:13',
    active: false
  },
  {icon: CheckCircle2, text: '商家已发货\nThe goods has been dispatched', time: '2023-12-14 10:45:36', active: false},
];


//======================================================================
// 4. 供应商绩效 (SupplierPerformance) 的数据和逻辑
//======================================================================
const radarChartContainer = ref(null);
let radarChart = null;

// 模拟不同商品的供应商数据
const supplierData = {
  "空气炸锅": [
    {
      name: "**股份有限公司",
      delivery: "96%",
      quality: "94%",
      price: "88%",
      ai: "优质推荐",
      status: "green",
    },
    {
      name: "***集团有限公司",
      delivery: "91%",
      quality: "87%",
      price: "95%",
      ai: "稳定供应",
      status: "blue",
    },
    {
      name: "***（中国）投资有限公司",
      delivery: "83%",
      quality: "90%",
      price: "92%",
      ai: "待观察",
      status: "gray",
    },
  ],
  "电饼铛": [
    {
      name: "*******工具有限公司",
      delivery: "88%",
      quality: "92%",
      price: "90%",
      ai: "优质推荐",
      status: "green",
    },
    {
      name: "******有限公司",
      delivery: "93%",
      quality: "85%",
      price: "97%",
      ai: "稳定供应",
      status: "blue",
    },
    {
      name: "****智能科技有限公司",
      delivery: "80%",
      quality: "88%",
      price: "89%",
      ai: "待观察",
      status: "gray",
    },
  ],
  "烧烤炉": [
    {
      name: "*******五金制品有限公司",
      delivery: "90%",
      quality: "91%",
      price: "85%",
      ai: "优质推荐",
      status: "green",
    },
    {
      name: "****金属制品厂",
      delivery: "89%",
      quality: "89%",
      price: "93%",
      ai: "稳定供应",
      status: "blue",
    },
    {
      name: "********有限公司",
      delivery: "85%",
      quality: "86%",
      price: "90%",
      ai: "待观察",
      status: "gray",
    },
  ],
};

// 模拟不同商品的雷达图数据
const radarChartData = {
  '空气炸锅': {
    indicator: [
      {name: '质量', max: 100},
      {name: '价格', max: 100},
      {name: 'AI标注', max: 100},
      {name: '交期', max: 100},
    ],
    seriesData: [
      {
        value: [94, 88, 95, 96],
        name: '**科技',
        areaStyle: {color: 'rgba(74, 144, 226, 0.4)'},
        lineStyle: {color: '#4A90E2'},
        itemStyle: {color: '#4A90E2'}
      }
    ]
  },
  '电饼铛': {
    indicator: [
      {name: '质量', max: 100},
      {name: '价格', max: 100},
      {name: 'AI标注', max: 100},
      {name: '交期', max: 100},
    ],
    seriesData: [
      {
        value: [92, 90, 93, 88],
        name: '**科技',
        areaStyle: {color: 'rgba(74, 144, 226, 0.4)'},
        lineStyle: {color: '#4A90E2'},
        itemStyle: {color: '#4A90E2'}
      }
    ]
  },
  '烧烤炉': {
    indicator: [
      {name: '质量', max: 100},
      {name: '价格', max: 100},
      {name: 'AI标注', max: 100},
      {name: '交期', max: 100},
    ],
    seriesData: [
      {
        value: [91, 85, 90, 90],
        name: '**科技',
        areaStyle: {color: 'rgba(74, 144, 226, 0.4)'},
        lineStyle: {color: '#4A90E2'},
        itemStyle: {color: '#4A90E2'}
      }
    ]
  }
};

const chartRange = ref("空气炸锅");

// 根据选择的商品类型计算供应商数据
const suppliers = computed(() => {
  return supplierData[chartRange.value] || [];
});

// 根据选择的商品类型计算雷达图配置
const radarOptions = computed(() => {
  const data = radarChartData[chartRange.value] || radarChartData['空气炸锅'];
  return {
    tooltip: {},
    radar: {
      indicator: data.indicator,
      radius: '70%',
      center: ['50%', '55%'],
      axisName: {color: '#666'},
      splitArea: {
        areaStyle: {
          color: ['rgba(250,250,250,0.3)', 'rgba(240,240,240,0.3)']
        }
      },
    },
    series: [{
      type: 'radar',
      data: data.seriesData
    }]
  };
});

const toService = () => {
  window.location.href = "/service"
}

// 监听商品类型变化，更新雷达图
watch(chartRange, () => {
  if (radarChart) {
    radarChart.setOption(radarOptions.value, true);
  }
});


//======================================================================
// 生命周期钩子: 挂载图表
//======================================================================
onMounted(() => {
  // 初始化趋势图
  const trendChart = echarts.init(trendChartContainer.value);
  trendChart.setOption(trendChartOptions);

  // 初始化雷达图
  radarChart = echarts.init(radarChartContainer.value);
  radarChart.setOption(radarOptions.value);

  // 监听窗口大小变化，使图表自适应
  window.addEventListener('resize', () => {
    trendChart.resize();
    radarChart.resize();
  });
});

const showLogistics = ref(false);

const searchLogistics = () => {
  showLogistics.value = true
}

// 添加采购订单相关状态和数据
const showPurchaseOrder = ref(false);

const purchaseOrderData = {
  orderNumber: 'PO-20240523-001',
  orderDate: '2024-05-23',
  supplier: '**科技有限公司',
  supplierContact: '张经理 138****8888',
  deliveryAddress: '**省**市**区**科技园1号楼',
  deliveryDate: '2024-05-30',
  items: [
    {
      id: 1,
      name: '**空气炸锅',
      model: 'KD50F39E',
      unit: '台',
      quantity: 1500,
      unitPrice: 299.00,
      totalPrice: 448500.00
    }
  ],
  totalAmount: 448500.00,
  paymentTerms: '货到付款30天',
  remarks: '请确保产品质量符合国家标准，并提供正规发票。'
};

const showPurchaseOrderModal = () => {
  showPurchaseOrder.value = true;
};

const closePurchaseOrderModal = () => {
  showPurchaseOrder.value = false;
};

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

const downloadPurchaseOrder = async () => {
  const element = document.getElementById('purchase-order-content');

  try {
    // 使用html2canvas将DOM元素转换为canvas
    const canvas = await html2canvas(element, {
      scale: 2, // 提高清晰度
      useCORS: true // 处理跨域图片
    });

    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'px',
      format: 'a4'
    });

    const imgWidth = pdf.internal.pageSize.getWidth();
    const imgHeight = (canvas.height * imgWidth) / canvas.width;

    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
    pdf.save(`采购订单-${purchaseOrderData.orderNumber}.pdf`);
  } catch (error) {
    console.error('下载PDF失败:', error);
  }
};


</script>

<template>
  <div class="mx-auto px-6" style="min-width: 1000px; padding: 0 80px; padding-top: 20px">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-xl font-semibold text-gray-800">库存监控看板</h1>
      <div class="border border-gray-300 rounded px-2 py-1">
        <button class="text-sm text-gray-500 cursor-pointer select-none flex items-center hover:text-gray-800">
          <img src="../../assets/img/operate/setting.svg" class="mr-1" alt=""> 设置阈值
        </button>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <div v-for="(card, card_idx) in statCardsData" :key="card.title"
           class="p-5 py-3 pb-4 rounded-lg shadow-sm flex flex-col justify-between text-white"
           :style="{
            background: ['#6E7CFF','#00CF76','#FF9800'][card_idx]
           }">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-3">
            <span class="font-semibold">{{ card.title }}</span>
          </div>
          <span class="text-sm px-1 py-1 rounded-full"
                :style="{ color: card.color === 'red' ? 'red' : '' }">
             {{ card.status }}
          </span>
        </div>
        <div class="mt-1 mb-2">
          <span class="text-2xl font-bold">{{ card.value }}</span>
          <span class="ml-1 text-white/70 text-sm">{{ card.unit }}</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-white/90">
          <span>库存: {{ card.percentage }}%</span>
          <div class="flex-1 bg-white/30 rounded-full h-1.5 mt-1">
            <div class="bg-white/90 h-1.5 rounded-full" :style="{ width: card.percentage + '%' }"></div>
          </div>
        </div>
      </div>
    </div>

    <h1 class="text-xl font-semibold text-gray-800 mb-5">库存预警趋势分析</h1>


    <div class="lg:col-span-5 bg-white p-6 rounded-xl shadow-xl" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
      <div ref="trendChartContainer" style="width: 100%; height: 300px;"></div>
    </div>


    <div class="flex gap-6 mb-6">

      <div class="w-96">
        <h1 class="text-xl font-semibold text-gray-800 mb-5 mt-6">物流追踪工具</h1>
        <div class="lg:col-span-2 bg-white p-6 rounded-xl" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
          <div class="relative mb-6">
            <input type="text" placeholder="输入订单号/运单号"
                   class="w-full pl-4 pr-20 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <button @click="searchLogistics"
                    class="cursor-pointer absolute right-0 top-0 h-full px-4 bg-blue-500 text-white rounded-r-md font-semibold hover:bg-blue-600">
              查询
            </button>
          </div>
          <ul v-if="showLogistics">
            <li v-for="(item, index) in trackingData" :key="index" class="relative flex gap-4 pb-6">
              <div v-if="index < trackingData.length - 1"
                   class="absolute left-[11px] top-6 h-full w-0.5 bg-gray-200"></div>
              <div class="flex-shrink-0">
                <div class="w-6 h-6 rounded-full flex items-center justify-center"
                     :class="item.active ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'">
                  <component :is="item.icon" :size="14"/>
                </div>
              </div>
              <div class="flex-grow">
                <p class="font-semibold" :class="item.active ? 'text-gray-800' : 'text-gray-500'">{{ item.text }}</p>
                <p class="text-xs text-gray-400 mt-1">{{ item.time }}</p>
              </div>
            </li>
          </ul>
          <div v-else class="flex flex-col items-center py-5 pb-10 opacity-40">
            <div>
              <svg t="1756290553639" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4324" width="60" height="60">
                <path
                    d="M734.208 354.461538a78.769231 78.769231 0 0 1 73.216 49.703385L866.461538 552.881231V787.692308a78.769231 78.769231 0 0 1-78.76923 78.76923H236.307692a78.769231 78.769231 0 0 1-78.76923-78.76923v-231.699693l59.195076-151.433846A78.769231 78.769231 0 0 1 290.107077 354.461538h444.100923z m-358.636308 216.615385H196.923077V787.692308a39.384615 39.384615 0 0 0 34.776615 39.108923L236.307692 827.076923h551.384616a39.384615 39.384615 0 0 0 39.108923-34.776615L827.076923 787.692308v-216.615385h-178.648615a137.846154 137.846154 0 0 1-272.856616 0z m358.636308-177.230769H290.107077a39.384615 39.384615 0 0 0-34.658462 20.676923l-2.048 4.371692-44.110769 112.797539h180.302769l-0.039384 0.472615A19.771077 19.771077 0 0 1 413.538462 551.384615a98.461538 98.461538 0 1 0 196.923076 0 19.692308 19.692308 0 0 1 18.786462-19.692307h186.407385l-44.819693-112.994462a39.384615 39.384615 0 0 0-31.822769-24.576L734.208 393.846154z m-203.539692-295.384616a19.692308 19.692308 0 0 1 19.37723 16.147693l0.315077 3.544615v155.254154a19.692308 19.692308 0 0 1-39.069538 3.544615l-0.315077-3.544615V118.153846a19.692308 19.692308 0 0 1 19.692308-19.692308z m-241.506462 5.316924l2.363077 2.678153 114.648615 155.254154a19.692308 19.692308 0 0 1-29.302153 26.033231l-2.363077-2.638769-114.648616-155.254154a19.692308 19.692308 0 0 1 29.302154-26.072615z m509.518769-1.496616a19.692308 19.692308 0 0 1 6.025847 24.497231l-1.851077 3.032615-114.294154 155.254154a19.692308 19.692308 0 0 1-33.555693-20.322461l1.811693-3.032616 114.333538-155.214769a19.692308 19.692308 0 0 1 27.569231-4.214154z"
                    fill="#333333" p-id="4325"></path>
              </svg>
            </div>
            <div class="mt-2 text-sm">
              请输入订单号后查询
            </div>
          </div>
        </div>
      </div>

      <div class="flex-1">
        <h1 class="text-xl font-semibold text-gray-800 mb-5 mt-6">供应商绩效评估</h1>
        <div class="lg:col-span-3 bg-white p-6 rounded-xl" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
          <div class="">
            <div class="chart-actions flex items-center">
              <div class="mr-2 mt-0.5 text-gray-900">请选择商品</div>
              <select v-model="chartRange"
                      class="outline-1 rounded outline-blue-600 font-bold bg-blue-50 text-blue-600 cursor-pointer">
                <option value="空气炸锅">空气炸锅</option>
                <option value="电饼铛">电饼铛</option>
                <option value="烧烤炉">烧烤炉</option>
              </select>
            </div>
            <div>
              <div ref="radarChartContainer" style="width: 100%; height: 250px;"></div>
            </div>
            <div class="">
              <table class="w-full text-sm text-left">
                <thead class="text-xs text-gray-500 uppercase bg-gray-50">
                <tr>
                  <th class="py-3 px-4">供应商名称</th>
                  <th class="py-3 px-4">交期</th>
                  <th class="py-3 px-4">质量</th>
                  <th class="py-3 px-4">价格</th>
                  <th class="py-3 px-4">AI标注</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="s in suppliers" :key="s.name" class="border-b border-b-gray-200">
                  <td class="py-3 px-4 font-semibold text-gray-700">{{ s.name }}</td>
                  <td class="py-3 px-4 text-gray-600">{{ s.delivery }}</td>
                  <td class="py-3 px-4 text-gray-600">{{ s.quality }}</td>
                  <td class="py-3 px-4 text-gray-600">{{ s.price }}</td>
                  <td class="py-3 px-4">
                    <span class="px-2 py-1 text-xs rounded-full" :class="{
                      'bg-green-100 text-green-800': s.status === 'green',
                      'bg-blue-100 text-blue-800': s.status === 'blue',
                      'bg-gray-100 text-gray-800': s.status === 'gray'
                    }">
                       {{ s.ai }}
                    </span>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>


    <h1 class="text-xl font-semibold text-gray-800 mb-5">智能补货建议</h1>

    <div class="bg-white p-6 rounded-xl flex flex-wrap items-center justify-between gap-4 mb-20"
         style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
      <div class="flex items-center flex-wrap gap-x-12 gap-y-4">
        <div class="flex items-center gap-4">
          <Package class="text-blue-500" :size="32"/>
          <div>
            <p class="text-sm text-gray-500">商品品类</p>
            <p class="font-semibold text-lg text-gray-800">**空气炸锅</p>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <Archive class="text-blue-500" :size="32"/>
          <div>
            <p class="text-sm text-gray-500">建议补货量</p>
            <p class="font-semibold text-lg text-gray-800">1,500 <span
                class="text-sm font-normal text-gray-600">件</span></p>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <Truck class="text-blue-500" :size="32"/>
          <div>
            <p class="text-sm text-gray-500">物流推荐</p>
            <p class="font-semibold text-lg text-gray-800">**优选</p>
          </div>
        </div>
      </div>
      <div>
        <button @click="showPurchaseOrderModal"
                class="w-full sm:w-auto bg-blue-500 text-white font-semibold py-2.5 px-6 rounded-lg hover:bg-blue-600 transition-colors cursor-pointer select-none">
          一键生成采购订单
        </button>
      </div>
    </div>

    <!-- 采购订单弹窗 -->
    <div v-if="showPurchaseOrder"
         class="fixed inset-0 bg-opacity-50! bg-opacity-50 flex items-center justify-center z-50 p-4"
         style="background: #00000099">
      <div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
        <div class="p-6 print-friendly" id="purchase-order-content">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-800">采购订单</h2>
            <button @click="closePurchaseOrderModal" class="text-gray-500 hover:text-gray-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="grid grid-cols-3 gap-4">
              <div>
                <p class="text-sm text-gray-500">订单编号</p>
                <p class="font-semibold">{{ purchaseOrderData.orderNumber }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500">下单日期</p>
                <p class="font-semibold">{{ purchaseOrderData.orderDate }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500">供应商</p>
                <p class="font-semibold">{{ purchaseOrderData.supplier }}</p>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-3">供应商信息</h3>
              <div class="bg-gray-50 p-4 rounded-lg">
                <p class="mb-1"><span class="text-gray-600">公司名称：</span>{{ purchaseOrderData.supplier }}</p>
                <p class="mb-1"><span class="text-gray-600">联系人：</span>{{ purchaseOrderData.supplierContact }}</p>
                <p><span class="text-gray-600">地址：</span>{{ purchaseOrderData.deliveryAddress }}</p>
              </div>
            </div>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-3">交付信息</h3>
              <div class="bg-gray-50 p-4 rounded-lg">
                <p class="mb-1"><span class="text-gray-600">交付地址：</span>{{ purchaseOrderData.deliveryAddress }}</p>
                <p class="mb-1"><span class="text-gray-600">预计交付日期：</span>{{ purchaseOrderData.deliveryDate }}</p>
                <p><span class="text-gray-600">付款条件：</span>{{ purchaseOrderData.paymentTerms }}</p>
              </div>
            </div>
          </div>

          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">订购商品</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品名称
                  </th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价(元)
                  </th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额(元)
                  </th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="item in purchaseOrderData.items" :key="item.id">
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">{{ item.name }}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ item.model }}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ item.unit }}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ item.quantity }}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ item.unitPrice.toFixed(2) }}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                    {{ item.totalPrice.toFixed(2) }}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="flex justify-end mb-6">
            <div class="w-64">
              <div class="flex justify-between py-2">
                <span class="text-gray-600">合计:</span>
                <span class="font-semibold">¥{{ purchaseOrderData.totalAmount.toFixed(2) }}</span>
              </div>
            </div>
          </div>

          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">备注</h3>
            <div class="bg-gray-50 p-4 rounded-lg">
              <p class="text-gray-700">{{ purchaseOrderData.remarks }}</p>
            </div>
          </div>

        </div>

      </div>
    </div>


    <div class="flex justify-center items-center mb-20 mt-10">
      <div @click="toService"
           class="px-10 py-3 bg-blue-600 rounded-full text-white font-bold cursor-pointer select-none transition shadow hover:shadow-2xl">
        下一步，前往客服页面 →
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 添加专门用于打印的CSS类 */
.print-friendly {
  color: #333333 !important;
  background-color: #ffffff !important;
}

.print-friendly * {
  color: inherit !important;
  background-color: transparent !important;
  border-color: #cccccc !important;
}

.print-friendly h1,
.print-friendly h2,
.print-friendly h3 {
  color: #000000 !important;
}

.print-friendly .text-gray-500,
.print-friendly .text-gray-600,
.print-friendly .text-gray-700,
.print-friendly .text-gray-800,
.print-friendly .text-gray-900 {
  color: #333333 !important;
}

.print-friendly .bg-gray-50,
.print-friendly .bg-white {
  background-color: #ffffff !important;
}

.print-friendly .border,
.print-friendly .border-b,
.print-friendly .border-gray-200,
.print-friendly .border-gray-300 {
  border-color: #cccccc !important;
}
</style>
